<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>web页面广告</title>
		<style>
			/* 219970720刘莹 */
			#total{
				display: flex;
				justify-content: center;/* 居中布局 */
			}
			.biank{
				width: 250px;
				height: 2450px;
			}
			.biank img{
				width: 100px;
				height: 350px;
			}
			@keyframes myshow{/* 缓慢显现 */
				0%{
					opacity: 0;
				}
				25%{
					opacity: 0.25;
				}
				50%{
					opacity: 0.5;
				}
				75%{
					opacity: 0.75;
				}
				100%{
					opacity: 1;
				}
			}
			.top{
				width: 250px;
				height: 2200px;
				position: fixed;/* 广告固定 */
				opacity: 0;
				animation: myshow 3s both;
			}
			#rtop{
				width: 250px;
				height: 2000px;
			}
			#right_picture{
				display: flex;
				justify-content: flex-end;/* 向右靠 */
			}
			#left_picture{
				height: 380px;
			}
			@keyframes myunder{
				0%{
					opacity: 0;
				}
				100%{
					opacity: 1;
				}
			}
			#under{
				display: none;
				position: absolute;
				top: 2200px;
				width: 250px;
				height: 250px;
				animation: myunder 1s 1;
			}
			#under img{
				width: 250px;
				height: 250px;
			}
			#zhongk{
				display: flex;
				justify-content: center;/* 居中布局 */
				width: 678px;
				height: 800px;
				background-color: white;
			}
			#zhongn{
				width: 600px;
				height: 800px;
				background-color: darkgrey;
			}
			input{
				border-color: azure;
				font-size: 10px;
				border-radius: 25px;
				cursor: pointer;/* 鼠标放上去时变小手 */
			}
			#button_left,#button_under{
				position: absolute;
				top: 0px;
			}
			#button_right{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="total">
			
			<div class="biank" id="left"><!-- 左大框 -->
				<div class="top" id="lefttop">
					<div id="left_picture">
						<img src="图/img.jpg" alt="">
					</div>
					<div id="button_left">
						<input type="button" name="关闭" id="off" value="X">
					</div>
				</div>
			</div>
			
			<div id="zhongk"><!-- 中框 -->
				<div id="zhongn"></div>
			</div>
			
			<div class="biank" id="right"><!-- 右大框 -->
				<div class="top" id="rightpicture">
					<div id="rtop">
						<div id="right_picture">
							<img src="图/img.jpg" alt="">
							<div id="button_right">
								<input type="button" name="关闭" id="off" value="X">
							</div>
						</div>
					</div>
				</div>
				<div id="under">
					<img src="图/img2.jpg" alt="">
					<div id="button_under">
						<input type="button" name="关闭" id="off" value="X">
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		var left=document.getElementById('lefttop');/* 左图+按钮 */
		var button_left=document.getElementById('button_left');/* 左按钮 */
		var right=document.getElementById('right_picture');/* 右图+按钮 */
		var button_right=document.getElementById('button_right');/* 右按钮 */
		var button_under=document.getElementById('button_under');/* 下按钮 */
		left.addEventListener('click',function(){
			left.style.display='none';
			right.style.display='none';
		});
		right.addEventListener('click',function(){
			left.style.display='none';
			right.style.display='none';
		});
		under.addEventListener('click',function(){
			under.style.display='none';
		});
		window.onload=function(){
			let under=document.getElementById('under');// 下图+按钮 
			setTimeout(function(){
				under.style.display='block';
			},1000);
		}
	</script>
</html>